<template>
  <div v-if="visible" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <div class="header-content">
          <h3>购买门票</h3>
          <p class="header-subtitle">选择您心仪的座位和票价</p>
        </div>
        <button class="close-btn" @click="closeModal">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
      
      <div class="modal-body">
        <!-- 演出信息卡片 -->
        <div class="event-card">
          <div class="event-image">
            <img :src="event.image" :alt="event.title">
            <div class="event-badge">热门</div>
          </div>
          <div class="event-details">
            <h4>{{ event.title }}</h4>
            <div class="event-meta">
              <div class="meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M21 10C21 17 12 23 12 23S3 17 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10Z" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ event.venue }}</span>
              </div>
              <div class="meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                  <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2"/>
                  <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2"/>
                  <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ formatDate(event.date) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 购买步骤指示器 -->
        <div class="purchase-steps">
          <div class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
            <div class="step-number">1</div>
            <span>选择票价</span>
          </div>
          <div class="step-divider"></div>
          <div class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
            <div class="step-number">2</div>
            <span>选择座位</span>
          </div>
          <div class="step-divider"></div>
          <div class="step" :class="{ active: currentStep >= 3 }">
            <div class="step-number">3</div>
            <span>确认购买</span>
          </div>
        </div>

        <!-- 票价选择 -->
        <div class="section" v-show="currentStep >= 1">
          <h4 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
            </svg>
            选择票价类型
          </h4>
          <div class="ticket-types">
            <div 
              v-for="ticket in ticketTypes" 
              :key="ticket.id"
              class="ticket-type"
              :class="{ 
                active: selectedTicket?.id === ticket.id,
                unavailable: ticket.available === 0
              }"
              @click="selectTicket(ticket)"
            >
              <div class="ticket-header">
                <span class="ticket-name">{{ ticket.name }}</span>
                <div class="ticket-price">
                  <span class="price-symbol">¥</span>
                  <span class="price-amount">{{ ticket.price }}</span>
                </div>
              </div>
              <div class="ticket-features">
                <span class="feature" v-if="ticket.name.includes('VIP')">🎭 VIP专享</span>
                <span class="feature" v-if="ticket.name.includes('前排')">👀 最佳视野</span>
                <span class="feature" v-if="ticket.name.includes('普通')">💰 超值选择</span>
              </div>
              <div class="ticket-availability">
                <div class="availability-bar">
                  <div 
                    class="availability-fill" 
                    :style="{ width: `${(ticket.available / (ticket.available + 50)) * 100}%` }"
                  ></div>
                </div>
                <span class="availability-text">
                  {{ ticket.available > 0 ? `剩余 ${ticket.available} 张` : '已售罄' }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 座位选择 -->
        <div class="section" v-show="currentStep >= 2 && selectedTicket">
          <h4 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M19 9V6C19 5.44772 18.5523 5 18 5H6C5.44772 5 5 5.44772 5 6V9M19 9H5M19 9V19C19 19.5523 18.5523 20 18 20H6C5.44772 20 5 19.5523 5 19V9" stroke="currentColor" stroke-width="2"/>
            </svg>
            选择座位区域
          </h4>
          <div class="seat-selection">
            <div class="theater-layout">
              <div class="stage">舞台</div>
              <div class="seat-areas">
                <div 
                  v-for="area in seatAreas" 
                  :key="area.id"
                  class="seat-area"
                  :class="{ 
                    active: selectedSeatArea?.id === area.id,
                    unavailable: !area.available || selectedTicket?.name !== area.ticketType
                  }"
                  @click="selectSeatArea(area)"
                >
                  <div class="area-name">{{ area.name }}</div>
                  <div class="area-price">¥{{ area.price }}</div>
                  <div class="area-seats">{{ area.availableSeats }} 个座位</div>
                </div>
              </div>
            </div>
            
            <!-- 数量选择 -->
            <div class="quantity-selection" v-if="selectedSeatArea">
              <label class="quantity-label">选择数量</label>
              <div class="quantity-controls">
                <button 
                  class="quantity-btn" 
                  @click="decreaseQuantity"
                  :disabled="quantity <= 1"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </button>
                <div class="quantity-display">
                  <span class="quantity-number">{{ quantity }}</span>
                  <span class="quantity-unit">张</span>
                </div>
                <button 
                  class="quantity-btn" 
                  @click="increaseQuantity"
                  :disabled="quantity >= Math.min(selectedSeatArea.availableSeats, 6)"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
                    <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </button>
              </div>
              <p class="quantity-note">每次最多购买6张票</p>
            </div>
          </div>
        </div>

        <!-- 订单确认 -->
        <div class="section" v-show="currentStep >= 3 && selectedTicket && selectedSeatArea">
          <h4 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
            </svg>
            确认订单信息
          </h4>
          <div class="order-summary">
            <div class="summary-item">
              <span class="item-label">演出名称</span>
              <span class="item-value">{{ event.title }}</span>
            </div>
            <div class="summary-item">
              <span class="item-label">票价类型</span>
              <span class="item-value">{{ selectedTicket.name }}</span>
            </div>
            <div class="summary-item">
              <span class="item-label">座位区域</span>
              <span class="item-value">{{ selectedSeatArea.name }}</span>
            </div>
            <div class="summary-item">
              <span class="item-label">购买数量</span>
              <span class="item-value">{{ quantity }} 张</span>
            </div>
            <div class="summary-divider"></div>
            <div class="summary-total">
              <span class="total-label">总计金额</span>
              <span class="total-amount">¥{{ totalPrice }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <div class="footer-actions">
          <button 
            v-if="currentStep > 1" 
            class="btn btn-outline" 
            @click="previousStep"
          >
            上一步
          </button>
          <button 
            v-if="currentStep < 3" 
            class="btn btn-primary" 
            @click="nextStep"
            :disabled="!canProceedToNextStep"
          >
            下一步
          </button>
          <template v-else>
            <button class="btn btn-outline" @click="addToCart" :disabled="!canPurchase">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <circle cx="9" cy="21" r="1" stroke="currentColor" stroke-width="2"/>
                <circle cx="20" cy="21" r="1" stroke="currentColor" stroke-width="2"/>
                <path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6" stroke="currentColor" stroke-width="2"/>
              </svg>
              加入购物车
            </button>
            <button class="btn btn-primary btn-purchase" @click="buyNow" :disabled="!canPurchase">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.7 15.3C4.3 15.7 4.6 16.5 5.1 16.5H17M17 13V17C17 18.1 17.9 19 19 19S21 18.1 21 17V13M9 19C10.1 19 11 19.9 11 21S10.1 23 9 23 7 22.1 7 21 7.9 19 9 19ZM20 19C21.1 19 22 19.9 22 21S21.1 23 20 23 18 22.1 18 21 18.9 19 20 19Z" stroke="currentColor" stroke-width="2"/>
              </svg>
              立即购买
            </button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '../stores/cart'
import { useUserStore } from '@/stores/user'
import { apiClient } from '@/api/client'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  event: {
    type: Object,
    required: true
  },
  ticketTypes: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['close', 'purchase-success'])

const router = useRouter()
const cartStore = useCartStore()
const userStore = useUserStore()

// 购买步骤控制
const currentStep = ref(1)

// 选中的票价、座位区域和数量
const selectedTicket = ref(null)
const selectedSeatArea = ref(null)
const quantity = ref(1)

// 座位区域数据
const seatAreas = ref([
  {
    id: 1,
    name: 'VIP区域',
    ticketType: 'VIP票',
    price: 880,
    availableSeats: 20,
    available: true
  },
  {
    id: 2,
    name: '前排中央',
    ticketType: '前排票',
    price: 680,
    availableSeats: 35,
    available: true
  },
  {
    id: 3,
    name: '前排两侧',
    ticketType: '前排票',
    price: 680,
    availableSeats: 28,
    available: true
  },
  {
    id: 4,
    name: '中排中央',
    ticketType: '普通票',
    price: 480,
    availableSeats: 45,
    available: true
  },
  {
    id: 5,
    name: '中排两侧',
    ticketType: '普通票',
    price: 480,
    availableSeats: 38,
    available: true
  },
  {
    id: 6,
    name: '后排区域',
    ticketType: '普通票',
    price: 480,
    availableSeats: 52,
    available: true
  }
])

// 计算总价
const totalPrice = computed(() => {
  if (!selectedSeatArea.value) return 0
  return selectedSeatArea.value.price * quantity.value
})

// 步骤控制逻辑
const canProceedToNextStep = computed(() => {
  if (currentStep.value === 1) return selectedTicket.value !== null
  if (currentStep.value === 2) return selectedSeatArea.value !== null
  return false
})

const canPurchase = computed(() => {
  return selectedTicket.value && selectedSeatArea.value && quantity.value > 0
})

// 选择票价
const selectTicket = (ticket) => {
  if (ticket.available === 0) return
  selectedTicket.value = ticket
  selectedSeatArea.value = null // 重置座位选择
  quantity.value = 1
  
  // 自动进入下一步
  if (currentStep.value === 1) {
    setTimeout(() => {
      currentStep.value = 2
    }, 300)
  }
}

// 选择座位区域
const selectSeatArea = (area) => {
  if (!area.available || selectedTicket.value?.name !== area.ticketType) return
  selectedSeatArea.value = area
  quantity.value = 1
  
  // 自动进入下一步
  if (currentStep.value === 2) {
    setTimeout(() => {
      currentStep.value = 3
    }, 300)
  }
}

// 步骤导航
const nextStep = () => {
  if (canProceedToNextStep.value && currentStep.value < 3) {
    currentStep.value++
  }
}

const previousStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

// 数量控制
const increaseQuantity = () => {
  const maxQuantity = selectedSeatArea.value ? Math.min(selectedSeatArea.value.availableSeats, 6) : 6
  if (quantity.value < maxQuantity) {
    quantity.value++
  }
}

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

// 关闭弹窗
const closeModal = () => {
  selectedTicket.value = null
  selectedSeatArea.value = null
  quantity.value = 1
  currentStep.value = 1
  emit('close')
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

// 加入购物车
const addToCart = () => {
  if (!canPurchase.value) return
  
  // 生成模拟座位号
  const seats = generateSeatNumbers(selectedSeatArea.value.name, quantity.value)
  
  const cartItem = {
    id: Date.now(),
    eventId: props.event.id,
    eventTitle: props.event.title,
    venue: props.event.venue,
    date: props.event.date,
    ticketType: selectedTicket.value.name,
    seatArea: selectedSeatArea.value.name,
    seats: seats,
    price: selectedSeatArea.value.price,
    quantity: quantity.value,
    total: totalPrice.value
  }
  
  cartStore.addItem(cartItem)
  
  // 显示成功提示
  showSuccessMessage('已加入购物车！')
  closeModal()
}

// 立即购买
const buyNow = async () => {
  if (!userStore?.user?.id) {
    showErrorMessage('请先注册并登录后再下单')
    router.push('/register')
    closeModal()
    return
  }
  
  if (!canPurchase.value) {
    showErrorMessage('请完成所有选择步骤')
    return
  }
  
  try {
    // 构建订单数据 - 根据数量重复票ID
    const ticketIds = Array(quantity.value).fill(selectedTicket.value.id)
    
    const body = {
      userId: userStore.user.id,
      eventId: props.event.id,
      ticketIds: ticketIds,
      contactName: userStore.user.realName || userStore.user.username || '用户',
      contactPhone: userStore.user.phone || '13900000000',
      contactEmail: userStore.user.email || 'user@example.com',
      paymentMethod: ''
    }
    
    const resp = await apiClient.post('/api/orders', body)
    if (resp?.orderNo) {
      showSuccessMessage(`下单成功，订单号：${resp.orderNo}`)
      emit('purchase-success', resp)
      closeModal()
      router.push('/orders')
    }
  } catch (err) {
    showErrorMessage(`下单失败：${err.message}`)
  }
}

// 生成座位号
const generateSeatNumbers = (areaName, count) => {
  const seats = []
  const startRow = areaName.includes('VIP') ? 1 : areaName.includes('前排') ? 3 : areaName.includes('中排') ? 8 : 15
  const startSeat = Math.floor(Math.random() * 10) + 1
  
  for (let i = 0; i < count; i++) {
    const row = startRow + Math.floor(i / 10)
    const seat = startSeat + (i % 10)
    seats.push(`${row}排${seat}座`)
  }
  
  return seats
}

// 消息提示函数
const showSuccessMessage = (message) => {
  // 简单的成功提示，可以后续替换为更好的UI组件
  const notification = document.createElement('div')
  notification.className = 'success-notification'
  notification.textContent = message
  notification.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: #4caf50;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    font-size: 14px;
    font-weight: 500;
  `
  document.body.appendChild(notification)
  setTimeout(() => {
    document.body.removeChild(notification)
  }, 3000)
}

const showErrorMessage = (message) => {
  const notification = document.createElement('div')
  notification.className = 'error-notification'
  notification.textContent = message
  notification.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: #f44336;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    font-size: 14px;
    font-weight: 500;
  `
  document.body.appendChild(notification)
  setTimeout(() => {
    document.body.removeChild(notification)
  }, 3000)
}

// 监听弹窗显示状态，重置选择
watch(() => props.visible, (newVal) => {
  if (!newVal) {
    selectedTicket.value = null
    selectedSeatArea.value = null
    quantity.value = 1
    currentStep.value = 1
  }
})
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: white;
  border-radius: 20px;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  animation: slideUp 0.4s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.header-content h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.header-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 4px 0 0 0;
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: white;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  background: white;
}

/* 演出信息卡片 */
.event-card {
  margin: 24px 32px;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  border: 1px solid #dee2e6;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
}

.event-image {
  position: relative;
  flex-shrink: 0;
}

.event-image img {
  width: 120px;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.event-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.event-details {
  flex: 1;
}

.event-details h4 {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin: 0 0 12px 0;
}

.event-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6c757d;
}

.meta-item svg {
  color: #667eea;
}

/* 购买步骤指示器 */
.purchase-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 32px;
  background: #f8f9fa;
  margin: 0 24px 24px;
  border-radius: 12px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6c757d;
  transition: all 0.3s ease;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background: #e9ecef;
  color: #6c757d;
  transition: all 0.3s ease;
}

.step.active .step-number {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.step.completed .step-number {
  background: #28a745;
  color: white;
}

.step.active {
  color: #667eea;
  font-weight: 600;
}

.step.completed {
  color: #28a745;
}

.step-divider {
  width: 40px;
  height: 2px;
  background: #e9ecef;
  margin: 0 16px;
  transition: all 0.3s ease;
}

.step.completed + .step-divider {
  background: #28a745;
}

/* 区块样式 */
.section {
  margin: 0 32px 32px;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #212529;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title svg {
  color: #667eea;
}

/* 票价选择样式 */
.ticket-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.ticket-type {
  padding: 20px;
  border: 2px solid #e9ecef;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  position: relative;
  overflow: hidden;
}

.ticket-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.ticket-type:hover::before,
.ticket-type.active::before {
  transform: scaleX(1);
}

.ticket-type:hover {
  border-color: #667eea;
  background: #f8f9ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.ticket-type.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
}

.ticket-type.unavailable {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.ticket-type.unavailable:hover {
  border-color: #e9ecef;
  background: #f8f9fa;
  transform: none;
  box-shadow: none;
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.ticket-name {
  font-weight: 700;
  font-size: 18px;
}

.ticket-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.price-symbol {
  font-size: 14px;
  font-weight: 500;
}

.price-amount {
  font-size: 20px;
  font-weight: 700;
  color: #e74c3c;
}

.ticket-type.active .price-amount {
  color: white;
}

.ticket-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.feature {
  padding: 4px 8px;
  background: #e9ecef;
  color: #495057;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.ticket-type.active .feature {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.ticket-availability {
  margin-top: 12px;
}

.availability-bar {
  width: 100%;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.availability-fill {
  height: 100%;
  background: linear-gradient(90deg, #e74c3c 0%, #f39c12 50%, #27ae60 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.availability-text {
  font-size: 12px;
  color: #6c757d;
}

.ticket-type.active .availability-text {
  color: rgba(255, 255, 255, 0.8);
}

/* 座位选择样式 */
.seat-selection {
  margin-bottom: 24px;
}

.theater-layout {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.stage {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 16px;
}

.seat-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.seat-area {
  padding: 16px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  text-align: center;
}

.seat-area:hover {
  border-color: #667eea;
  background: #f8f9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.seat-area.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.seat-area.unavailable {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.seat-area.unavailable:hover {
  border-color: #e9ecef;
  background: #f8f9fa;
  transform: none;
  box-shadow: none;
}

.area-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}

.area-price {
  font-size: 18px;
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 8px;
}

.seat-area.active .area-price {
  color: white;
}

.area-seats {
  font-size: 12px;
  color: #6c757d;
}

.seat-area.active .area-seats {
  color: rgba(255, 255, 255, 0.8);
}

/* 数量选择样式 */
.quantity-selection {
  margin-bottom: 24px;
}

.quantity-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 12px;
}

.quantity-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.quantity-btn {
  width: 44px;
  height: 44px;
  border: 2px solid #667eea;
  background: white;
  color: #667eea;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.quantity-btn:hover {
  background: #667eea;
  color: white;
  transform: scale(1.1);
}

.quantity-btn:disabled {
  border-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

.quantity-btn:disabled:hover {
  background: white;
  color: #6c757d;
  transform: none;
}

.quantity-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: white;
  border-radius: 8px;
  border: 2px solid #e9ecef;
}

.quantity-number {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
}

.quantity-unit {
  font-size: 12px;
  color: #6c757d;
}

.quantity-note {
  font-size: 12px;
  color: #6c757d;
  text-align: center;
  margin-top: 8px;
}

/* 订单确认样式 */
.order-summary {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #dee2e6;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #dee2e6;
}

.summary-item:last-child {
  border-bottom: none;
}

.item-label {
  color: #6c757d;
  font-weight: 500;
}

.item-value {
  font-weight: 600;
  color: #212529;
}

.summary-divider {
  height: 2px;
  background: #667eea;
  margin: 16px 0;
  border-radius: 1px;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  font-size: 18px;
}

.total-label {
  font-weight: 600;
  color: #212529;
}

.total-amount {
  font-size: 24px;
  font-weight: 700;
  color: #e74c3c;
}

/* 底部操作栏 */
.modal-footer {
  padding: 24px 32px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
}

.footer-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  align-items: center;
}

.btn {
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn-outline {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-outline:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: 2px solid transparent;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.btn-purchase {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.btn-purchase:hover {
  box-shadow: 0 8px 24px rgba(40, 167, 69, 0.4);
}

.btn:disabled {
  background: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
  border-color: #e9ecef;
}

.btn:disabled:hover {
  background: #e9ecef;
  color: #6c757d;
  transform: none;
  box-shadow: none;
}

.btn:disabled::before {
   display: none;
 }

/* 响应式设计 */
@media (max-width: 1024px) {
  .modal-content {
    width: 98%;
    max-width: 700px;
  }
  
  .ticket-types {
    grid-template-columns: 1fr;
  }
  
  .seat-areas {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 768px) {
  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  
  .modal-header {
    padding: 20px 24px;
  }
  
  .modal-title {
    font-size: 20px;
  }
  
  .step-indicator {
    padding: 16px 24px;
    overflow-x: auto;
  }
  
  .step {
    margin: 0 12px;
    white-space: nowrap;
  }
  
  .event-card {
    margin: 16px 24px;
    padding: 20px;
  }
  
  .event-info {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .event-poster {
    width: 100px;
    height: 133px;
    margin: 0 auto;
  }
  
  .section {
    margin: 0 24px 24px;
  }
  
  .section-title {
    font-size: 18px;
  }
  
  .ticket-types {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .ticket-type {
    padding: 16px;
  }
  
  .theater-layout {
    padding: 16px;
  }
  
  .seat-areas {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .quantity-controls {
    gap: 16px;
    padding: 16px;
  }
  
  .quantity-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .quantity-display .quantity-number {
    font-size: 20px;
  }
  
  .order-summary {
    padding: 20px;
  }
  
  .modal-footer {
    padding: 20px 24px;
    flex-direction: column;
    gap: 12px;
  }
  
  .footer-actions {
    width: 100%;
    justify-content: stretch;
  }
  
  .btn {
    flex: 1;
    padding: 16px 20px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .modal-header {
    padding: 16px 20px;
  }
  
  .modal-title {
    font-size: 18px;
  }
  
  .step-indicator {
    padding: 12px 20px;
  }
  
  .step-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .step-label {
    font-size: 12px;
  }
  
  .event-card,
  .section {
    margin: 0 20px 20px;
  }
  
  .event-card {
    padding: 16px;
  }
  
  .event-details h3 {
    font-size: 20px;
  }
  
  .section-title {
    font-size: 16px;
  }
  
  .ticket-type {
    padding: 14px;
  }
  
  .ticket-name {
    font-size: 16px;
  }
  
  .price-amount {
    font-size: 18px;
  }
  
  .theater-layout {
    padding: 12px;
  }
  
  .stage {
    padding: 8px;
    font-size: 14px;
  }
  
  .seat-area {
    padding: 12px;
  }
  
  .area-name {
    font-size: 14px;
  }
  
  .area-price {
    font-size: 16px;
  }
  
  .quantity-controls {
    padding: 12px;
    gap: 12px;
  }
  
  .quantity-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .quantity-display .quantity-number {
    font-size: 18px;
  }
  
  .order-summary {
    padding: 16px;
  }
  
  .summary-item {
    padding: 10px 0;
  }
  
  .total-amount {
    font-size: 20px;
  }
  
  .modal-footer {
    padding: 16px 20px;
  }
  
  .btn {
    padding: 14px 16px;
    font-size: 14px;
  }
}
</style>